<template>
  <div>
    <div class="container">
      <div class="headerBox">
        <h5 class="f-c" @click="toBasicInfo">基本资料</h5>
        <h5 class="f-c" style="margin-left: 30px" @click="toDetailesInfo">
          详细资料
        </h5>
        <h5 style="margin-left: 30px" @click="toAttachment">相关附件</h5>
      </div>
      <div class="uploadForm">
        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="limit"
          action="http://132.232.110.185/personnelManagement/file/imgUploadFile"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :data="data"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <div slot="tip" class="el-upload__tip">
            上传个人形象照片、个人信息表和身份证附件，只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <div style="margin-top: 50px">
          <span
            style="font-weight: 600; color: #1270ae; cursor: pointer"
            @click="preInfo"
            >上一步</span
          >
          <el-button class="btn-save" @click="submitUpload">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  name: "Attachment",
  data() {
    return {
      limit: 3,
      labelPosition: "right",
      fileList: [],
      data: {
        tId: JSON.parse(localStorage.getItem("userInfo")).tId,
      },
    };
  },
  methods: {
    ...mapMutations("resume", ["preBack", "next"]),
    // 上一个路由
    preInfo() {
      this.preBack();
    },
    //to
    toBasicInfo() {
      this.next("info");
    },
    toDetailesInfo() {
      this.next("detail");
    },
    toAttachment() {
      this.next("attachment");
    },
    //上传
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>

<style scoped>
.container {
  width: 98%;
  height: 350px;
  margin: 0 auto;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.headerBox {
  width: 100%;
  height: 40px;
  padding: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #cfd1d2;
  cursor: pointer;
}

.uploadForm {
  width: 40%;
  margin: 50px 0 0 50px;
}

.f-c {
  color: #999;
}

.btn-save {
  background-color: #1ab394;
  border-color: #1ab394;
  color: #fff;
  margin: 0 20px;
}
</style>